<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    <b style="color: red; font-size: 20px;">学生信息</b>
    <div style="float: right;">
        <el-form inline="true" :model="findData" :rules="rules" ref="findForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
            <el-input v-model="findData.name"></el-input>
        </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="findData.sex" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-button type="primary" @click="selectByPage()">返回</el-button>
        <el-button type="primary" @click="findStu()">查询学生</el-button><el-button type="primary" @click="showAddStu">添加学生</el-button>
        </el-form>
    </div>


    <el-table :data="tableData">
        <el-table-column prop="id" label="学号" width="120">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="180">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="props">
              <el-button type="warning" @click="showEditStu(props.row)">修改</el-button>
              <el-button type="danger" @click="deleteStu(props.row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>

    <!--
        分页组件
          @size-change： 当改变每页条数时触发的函数
          @current-change：当改变页码时触发的函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[2,3,5]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

    <el-dialog title="添加学生信息" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
            <!--<el-form-item label="学生学号" prop="id">
                <el-input v-model="editFormData.id"></el-input>
            </el-form-item>-->
            <el-form-item label="学生姓名" prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="学生年龄" prop="age">
                <!--v-model : 双向绑定 -->
                <el-input v-model="formData.age" ></el-input>
            </el-form-item>
            <el-form-item label="学生性别" prop="sex">
                <el-input v-model="formData.sex"></el-input>
            </el-form-item>
            <el-form-item label="家庭地址" prop="address">
                <el-input v-model="formData.address"></el-input>
            </el-form-item>

            <el-form-item align="right">
                <el-button type="primary" @click="addStu()">添加</el-button>
                <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog title="编辑学生信息" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')" >
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="editFormData" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学生id" prop="id">
                <el-input v-model="editFormData.id" disabled="false"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名" prop="name">
                <el-input v-model="editFormData.name"></el-input>
            </el-form-item>
            <el-form-item label="学生年龄" prop="age">
                <!--v-model : 双向绑定 -->
                <el-input v-model="editFormData.age"></el-input>
            </el-form-item>
            <el-form-item label="学生性别" prop="sex">
                <el-input v-model="editFormData.sex"></el-input>
            </el-form-item>
            <el-form-item label="家庭地址" prop="address">
                <el-input v-model="editFormData.address"></el-input>
            </el-form-item>

            <el-form-item align="right">
                <el-button type="warning" @click="updateStu()">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script>
    let vm= new Vue({
        el:"#div",
        data:{
            dialogTableVisible4add: false,  //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            formData:{},//添加表单的数据
            editFormData: {},//编辑表单的数据
            findData:{},//条件查询的数据
            tableData:[],//表格数据
            pagination: {
                currentPage: 1, //当前页
                pageSize: 3,    //每页显示条数
                total: 0        //总条数
            },
            rules: {
                name: [
                    {required: true, message: '请输入姓名', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                age: [
                    {required: true, message: '请输入年龄', trigger: 'blur'}
                ],
                sex: [
                    {required: true, message: '请输入性别', trigger: 'blur'},
                    {min: 1, max: 10, message: '长度在 1 个字符', trigger: 'blur'}
                ],
                address: [
                    {required: true, message: '请输入地址', trigger: 'blur'},
                    {min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur'}
                ],
            }
        },
        methods: {
            /**
             * 分页查询功能
             */
            selectByPage() {
                alert("2")
                axios.get("/selectByPage?currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize)
                    .then(resp => {
                        //将查询出的数据赋值tableData
                        this.tableData = resp.data.list;
                        //设置分页参数
                        //当前页
                        this.pagination.currentPage = resp.data.pageNum;
                        //总条数
                        this.pagination.total = resp.data.total;
                    })
            },
            //改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                //重新执行查询
                this.selectByPage();
            },
            //改变页码时执行的函数
            handleCurrentChange(pageNum) {
                //修改分页查询的参数
                this.pagination.currentPage = pageNum;
                //重新执行查询
                this.selectByPage();
            },
            showAddStu() {
                //弹出窗口
                this.dialogTableVisible4add = true;
            },
            /**
             * 添加学生功能
             */
            addStu() {
                axios.get("/addStudent?name=" + this.formData.name +
                    "&age=" + this.formData.age + "&sex=" + this.formData.sex + "&address=" + this.formData.address).then(
                    resp => {
                        if (resp.data == true) {
                            this.selectByPage();
                        }
                    })
                this.dialogTableVisible4add = false;
            },
            /**
             * 删除数据
             */
            deleteStu(row) {
                if (confirm("确定要删除学生" + row.name + "吗?")) {
                    axios.get("/delStudent?id=" + row.id).then(
                        resp => {
                            if (resp.data == true) {
                                this.selectByPage();
                            }
                        })
                }
            },
            /**
             * 修改
             *
             */

            updateStu(){
                axios.get("/updateStudent?id=" + this.editFormData.id+"&name=" +
                    this.editFormData.name + "&age=" + this.editFormData.age +
                    "&sex=" + this.editFormData.sex + "&address=" + this.editFormData.address).then(
                    resp => {
                        if (resp.data == true) {
                            this.selectByPage();
                        }
                    })
                //关闭编辑窗口
                this.dialogTableVisible4edit = false;
                },
            /**
             * 条件查询
             * @param addForm
             */
            findStu(){
                axios.get("/findStu?currentPage=" + this.pagination.currentPage + "&pageSize="
                    + this.pagination.pageSize+"&name="+this.findData.name+"&sex="+this.findData.sex)
                    .then(resp => {
                        //将查询出的数据赋值tableData
                        this.tableData = resp.data.list;
                        //设置分页参数
                        //当前页
                        this.pagination.currentPage = resp.data.pageNum;
                        //总条数
                        this.pagination.total = resp.data.total;
                    })
            },
            resetForm(addForm) {
                //双向绑定，输入的数据都赋值给了formData， 清空formData数据
                this.formData = {};
                //清除表单的校验数据
                this.$refs[addForm].resetFields();
            },
            showEditStu(row) {
                //1. 弹出窗口
                this.dialogTableVisible4edit = true;

                //2. 显示表单数据
                this.editFormData = {
                    id:row.id,
                    name:row.name,
                    age:row.age,
                    sex:row.sex,
                    address:row.address,
                }
            }
        },
        mounted(){
            //调用分页查询功能
            this.selectByPage();
        }
    });
</script>
</html>